<script setup>
import { computed, ref } from 'vue'
import { getBoyImage, getGirlImg } from '../utils/defaultImg.js'
import { DeleteFilled, CirclePlusFilled } from '@element-plus/icons-vue'

defineOptions({
  name: 'MapParking'
})
const defaultBoy = getBoyImage()
const defaultGirl = getGirlImg()
const props = defineProps({
  label: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  },
  pageInfo: {
    type: Object,
    default: () => ({
      total: 0,
      page: 1,
      size: 10
    })
  },
  add: {
    type: Boolean,
    default: true
  },
  delete: {
    type: Boolean,
    default: true
  },
  lefSpan: {
    type: Number,
    default: 4
  },
  showPage: {
    type: Boolean,
    default: true
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  operation: {
    type: Boolean,
    default: true
  },
  multipleSelect: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits([
  'changePage',
  'handleCurrentChange',
  'handleSizeChange',
  'handleSelectionChange',
  'deleteRow',
  'searchUserInfo'
])
const handleSizeChange = (size) => {
  console.log(size)
  emit('handleSizeChange', size)
  table.value.setScrollTop(0)
}
const handleCurrentChange = (page) => {
  console.log(page)
  emit('handleCurrentChange', page)
  table.value.setScrollTop(0)
}

const handleSelectionChange = (list) => {
  emit('handleSelectionChange', list)
}
const deleteRows = () => {
  emit('deleteRow')
}
const deleteRow = (num) => {
  emit('deleteRow', num)
}
const rgtSpan = computed(() => {
  return 24 - props.lefSpan
})
//在这停留
const searchUserInfo = (row) => {
  emit('searchUserInfo', row)
}
const table = ref(null)
</script>

<template>
  <el-container class="layout">
    <el-header v-if="showHeader" height="40px">
      <el-row>
        <el-col :span="lefSpan">
          <div style="display: flex">
            <el-button v-if="add" type="success" :icon="CirclePlusFilled">新增</el-button>
            <slot v-if="!add" name="add"></slot>
            <el-button id="delete" type="danger" :icon="DeleteFilled" text bg @click="deleteRows()"
              >批量删除</el-button
            >
          </div>
        </el-col>
        <el-col :span="rgtSpan" style="display: flex; justify-content: flex-end">
          <slot name="right"></slot>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        ref="table"
        height="100%"
        border
        :data="data"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="multipleSelect" type="selection" width="55"> </el-table-column>
        <el-table-column v-for="(item, index) in label" :key="index" :label="item.label">
          <template v-if="item.prop != 'pic'" #default="scope">{{ scope.row[item.prop] }}</template>
          <template v-else #default="scope">
            <img
              :src="
                scope.row[item.prop]?.length > 10
                  ? scope.row[item.prop]
                  : scope.row['sex'] == '女'
                    ? defaultGirl
                    : defaultBoy
              "
              alt=""
              style="height: 6rem; width: 6rem"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="operation" width="110" label="操作" type="index">
          <template #default="scope">
            <el-button
              id="userInfo"
              type="primary"
              icon="UserFilled"
              circle
              @click="searchUserInfo(scope.$index)"
            />
            <el-button
              type="danger"
              :icon="DeleteFilled"
              circle
              @click="deleteRow(scope.row['num'])"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div v-if="showPage" class="footer">
        <el-pagination
          :current-page="pageInfo.page"
          :page-size="pageInfo.size"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-footer>
  </el-container>
</template>
<style lang="scss" scoped>
.layout {
  height: 100%;
}
.footer {
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#delete {
  margin-right: 10px;
}
</style>
